import React, {createRef} from "react";
import './personal-change_password.scss'
import {Button, Input} from "antd";
import {getRefValue} from "../../../utils/refUtils";
import {showWarningMsg} from "../../../utils/antdUtils";
import {changePassword} from "../../../api/userApi";


function PersonalChange_password(props){

    const oldPassword = createRef()
    const newPassword = createRef()
    const confirmPassword = createRef()

    const submit = () => {
        if (getRefValue(newPassword) === getRefValue(confirmPassword)){
            const data = {
                newPassword: getRefValue(newPassword),
                oldPassword: getRefValue(oldPassword)
            }
            changePassword(13, data)
        } else {
            showWarningMsg('密码不一致，请重新输入')
        }
    }

    return(
        <div className={'password_change_container'}>
            <div className={'input_item'}>
                <div>原密码（必填）</div>
                <Input placeholder={'请输入原密码'} ref={oldPassword}/>
            </div>

            <div className={'input_item'}>
                <div>新密码（必填）</div>
                <Input placeholder={'请输入新密码'} ref={newPassword}/>
            </div>

            <div className={'input_item'}>
                <div>确认密码（必填）</div>
                <Input placeholder={'请输入确认密码'} ref={confirmPassword}/>
            </div>

            <div className={'input_item'}>
                <Button type={'primary'} onClick={submit}>保存</Button>
            </div>
        </div>
    )
}

export default PersonalChange_password